<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" :before-close="handleClose"
      :close-on-click-modal="false">
      <el-form :inline="false" :model="formInline" ref="template-add-form" :rules="formRules" class="demo-form-inline"
        v-loading="loadingForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12" v-if="showDom.some(e => e == 'connectorType')">
            <el-form-item label="类型:" prop="connectorType">
              <el-select v-model="formInline.connectorType" class="cell-input" placeholder="请选择数据源">
                <el-option v-for="(item, index) in surfaceOptions" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="showDom.some(e => e == 'name')">
            <el-form-item label="名称:" prop="name">
              <el-input v-model="formInline.name" class="cell-input" placeholder="请输入名称">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" v-if="showDom.some(e => e == 'username')">
            <el-form-item label="账号:" prop="username">
              <el-input v-model="formInline.username" class="cell-input" placeholder="请输入账号">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="showDom.some(e => e == 'password')">
            <el-form-item label="密码:" prop="password">
              <el-input v-model="formInline.password" class="cell-input" placeholder="请输入密码">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" v-if="showDom.some(e => e == 'url')">
            <el-form-item label="URL:" prop="url">
              <el-input type="textarea" :rows="5" class="cell-input-textarea" placeholder="请输入URL"
                v-model="formInline.url">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" v-if="showDom.some(e => e == 'schema')">
            <el-form-item :label="formInline.connectorType == 'Oracle'? '架构名' : '模式名'" prop="schema">
              <el-input v-model="formInline.schema" class="cell-input" placeholder="请输入模式名">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" v-if="showDom.some(e => e == 'dropSlotOnClose')">
            <el-form-item label="删除Slot:" prop="dropSlotOnClose">
              <el-switch v-model="formInline.dropSlotOnClose" active-value="on" inactive-value="" active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="showDom.some(e => e == 'pluginName')">
            <el-form-item label="插件:" prop="pluginName">
              <el-select v-model="formInline.pluginName" class="cell-input" placeholder="请选择插件">
                <el-option label="syslogical_output" value="syslogical_output" />
                <el-option label="test_decoding" value="test_decoding" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24"  v-if="showDom.some(e => e == 'driverClassName')">
            <el-form-item label="驱动:" prop="driverClassName">
              <el-input v-model="formInline.driverClassName" style="width: 630px;" placeholder="请输入驱动">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 未知 -->
        <!-- <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="SQL表:" prop="">
              <el-select v-model="formInline.sql" class="cell-input" placeholder="请选择数据源">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button type="primary">添加</el-button>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="SQL名称:" prop="mealCardNumber">
              <el-input v-model="formInline.mealCardNumber" class="cell-input" placeholder="请输入插件">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主表:" prop="mealCardNumber">
              <el-input v-model="formInline.mealCardNumber" class="cell-input" placeholder="请输入插件">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- 未知 -->



        <el-row :gutter="20">
          <el-col :span="24" v-if="showDom.some(e => e == 'sql')">
            <el-button icon="el-icon-edit" style="float: right; margin-right: 28px" type="text"
              @click="handleResetSql">sql美化</el-button>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24" v-if="showDom.some(e => e == 'sql')">
            <el-form-item label="SQL:" prop="sql">
              <el-input type="textarea" :rows="7" class="cell-input-textarea" placeholder="请输入URL"
                v-model="formInline.sql">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer" v-if="!loadingForm">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
let _this
// let sqlFormatter = require("sql-formatter");
import { findConnectorPage,addConnector,updataConnector } from "@/api/drive/index";
export default {
  data() {
    return {
      title: "",
      id: null,
      surfaceOptions: [
        // "DqlKingbase",
        // "DqlMySQL",
        // "DqlOracle",
        // "DqlPostgreSQL",
        // "DqlSQLite",
        // "DqlSqlServer",
        // "Elasticsearch",
        // "File",
        // "Kafka",
        // "Kingbase",
        // "MySQL",
        // "Oracle",
        // "PostgreSQL",
        // "SQLite",
        // "SqlServer",
        "Kingbase",
        "MySQL",
        "Oracle",
      ],
      options: [],
      dialogVisible: false,
      formRules: {
        name: { required: true, message: '请输入名称', trigger: 'blur' },
        username: { required: true, message: '请输入账号', trigger: 'blur' },
        password: { required: true, message: '请输入密码', trigger: 'blur' },
        url: { required: true, message: '请输入url', trigger: 'blur' },
        schema: { required: true, message: '请输入模式名', trigger: 'blur' },
      },
      formInline: {},
      loadingScreen: null,
      loadingForm: false,
      fileName: "",
      btnLoading: false,
    };
  },
  methods: {
    async init(id) {
      try {
        _this = this;
        this.title = "";
        this.resetFrom();
        this.dialogVisible = true;
        if (!id) return (this.title = "新增");
        this.title = "修改";
        this.loadingForm = true;
        let res = await findConnectorPage(id);
        this.loadingForm = false;
        this.formInline.id = id;
        Object.keys(this.formInline).forEach((item) => {
          this.formInline[item] = res.resultValue.connector.config[item];
        });
        this.formInline.name = res.resultValue.connector.name;
        this.formInline.id = res.resultValue.connector.id;
      } catch (e) {
        this.loadingForm = false;
        //TODO handle the exception
      }
    },
    handleResetSql() {
      // this.formInline.sqlVal = sqlFormatter.format(this.formInline.sqlVal, { syntax: 'sql' });
    },
    resetFrom() {
      this.formInline = {
        connectorType: "Kingbase",
        name: "",
        username: "",
        password: "",
        url: "",
        dropSlotOnClose: "on",
        schema: "public",
        pluginName: "syslogical_output",
        sql: `SELECT T1.* FROM "USER" T1`,
        driverClassName: "com.kingbase8.Driver",
        sqlTables: [],

      };
      if (this.$refs["template-add-form"])
        this.$refs["template-add-form"].resetFields();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleSubmit() {
      this.$refs["template-add-form"].validate(async (valid) => {
        try {
          if (valid) {
            let res;
            this.btnLoading = true;
            if (!this.formInline.id) {
              res = await addConnector(this.formInline);
              this.$message.success("添加成功");
            } else {
              res = await updataConnector(this.formInline);
              this.$message.success("更新成功");
            }
            this.btnLoading = false;
            this.dialogVisible = false;
            this.$emit("success");
          }
        } catch (e) {
          console.log("查看捕获的错误：", e);
          this.btnLoading = false;
        }
      });
    },
  },
  created() {
    this.resetFrom();
  },
  computed: {
    showDom() {
      let arr = [];
      if (this.formInline.connectorType == "Kingbase") {
        arr = [
          "connectorType",
          "name",
          "username",
          "password",
          "url",
          "schema",
          "dropSlotOnClose",
          "pluginName",
          "driverClassName"
        ]
      }
      if (this.formInline.connectorType == "MySQL") {
        arr = [
           "connectorType",
          "name",
          "username",
          "password",
          "url"
        ]
      }
      if (this.formInline.connectorType == "Oracle") {
        arr = [
          "connectorType",
          "name",
          "username",
          "password",
          "url",
          "schema",
          "driverClassName"
        ]
      };
      return arr;
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  text-align: left;
}

.width100 {
  width: 590px;
}

.cell-input {
  width: 240px;
}

.cell-input-textarea {
  width: 630px;
}

.up-file-wrappar {
  display: flex;
  align-items: center;
}

.total-day {
  display: inline-block;
  height: 36px;
  width: 40px;
  margin: 0 6px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  padding: 0 15px;
  box-sizing: border-box;
}

.up-file-name {
  display: inline-block;
  height: 36px;
  min-width: 555px;
  text-align: left;
  line-height: 36px;
  box-sizing: border-box;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #606266;
  font-size: inherit;

  .text {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 1; //行数
    -webkit-box-orient: vertical;
    max-width: 555px;
  }
}
</style>
